<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2023-09-06 09:36:08
 * @LastEditTime: 2025-03-31 10:39:01
 * @LastEditors: Dxcr
-->
<template>
  <div id="WebGL" class="WebGL">
    <div id="legend" class="legend">
      <div class="minValue">{{ data.minValue }}</div>
      <div class="maxValue">{{ data.maxValue }}</div>
    </div>
  </div>
</template>
<script setup>
import {
  defineComponent,
  ref,
  reactive,
  computed,
  toRefs,
  onMounted,
  watch,
  createApp
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import * as THREE from 'three';
import DxcrThree from '@/three/js/DxcrThree.js'
import ThreejsUtill from "@/three/js/ThreejsUtill.js";
import { fetchCrackData, fetchCrackRealData } from '@/api/crack/index.js'
import CrackMap from './CrackMap.js'
const crackData = [
  [
    [1026.93, 0.48208333726678115, 17.7960626747626, -18.731129383395352, 1.4937887535600591],
    [1027.1974408900555, 1.4456576054612553, 17.621155367867583, -18.54703184140378, 1.457354881522009],
    [1027.4713056798353, 2.407425808782018, 17.44360431478218, -18.36015164164942, 1.4209210094839586]
  ]
];

const getRoute = useRoute()
const router = useRouter()
const data = reactive({
  minValue: '',
  maxValue: ''
})

// 定义 props
const props = defineProps({
});


let _crackMap = null;
let isDark = true

async function getCrackData() {
  // const res = await fetchCrackData()
  const res = await fetchCrackRealData()
  console.log(res.data)
  setCrackData(res.data)
}

onMounted(async () => {
  initCrackMap()

  watchEffect(() => {
    getCrackData()
    const intervalId = setInterval(() => {
      getCrackData();
    }, 5000);

    return () => clearInterval(intervalId);
  })
})

function initCrackMap() {
  const crackMap = new CrackMap()
  _crackMap = crackMap
}

function setCrackData(crackData) {
  _crackMap.setCrackData(crackData)
  console.log(_crackMap)
  data.minValue = _crackMap.minValue
  data.maxValue = _crackMap.maxValue
}
</script>
<style lang="scss" scoped>
.WebGL {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.legend {
  position: absolute;
  right: 16px;
  bottom: 16px;

  .minValue {
    position: absolute;
    bottom: 0px;
    left: -10px;
    transform: translate(-100%, 0);
    font-size: 12px;
    color: #fff;
  }

  .maxValue {
    position: absolute;
    top: 0px;
    left: -10px;
    transform: translate(-100%, 0);
    font-size: 12px;
    color: #fff;
  }
}
</style>
<style lang="scss">
.WebGL {}
</style>